<template>
  <div class="graphitizing">
    <div class="card-table">
      <!-- <card-uploading :show="uploading" :succeed="succeed"><span style="font-size:14px;">{{uploadText}}</span></card-uploading> -->
      <!-- 新增 -->
      <el-dialog
        @close="dialogClose()"
        title="新增Excel"
        append-to-body
        :modal-append-to-body="true"
        width="800px"
        :visible.sync="dialogUpload"
      >
        <el-form
          class="addForm"
          :rules="rules1"
          size="small"
          ref="form1"
          :model="form"
          label-width="110px"
        >
          <el-form-item label="上传Excel">
            <el-upload
              :before-remove="() => (fileList = [])"
              class="upload-demo"
              :file-list="fileList"
              :before-upload="beforeUpload"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-change="handleChange"
              accept="  .xlsx"
              :limit="1"
              :on-exceed="onExceed"
              :auto-upload="false"
            >
              <el-button slot="trigger" size="small" type="primary"
                >点击上传</el-button
              >
            </el-upload>
          </el-form-item>
        </el-form>
        <span slot="footer">
          <el-button v-loading="loading" type="primary" @click="submit"
            >确 定</el-button
          >
          <el-button type="" @click="resetForm('form1')">取 消</el-button>
        </span>
      </el-dialog>
      <!-- 编辑 -->
      <el-dialog
        title="修改筛分记录"
        custom-class="dialogStove"
        @close="dialogClose()"
        append-to-body
        :modal-append-to-body="true"
        width="800px"
        :visible.sync="dialogUploadThen"
      >
        <div class="formgar">
          <el-form
            :rules="rules2"
            size="small"
            ref="form2"
            :model="form"
            label-width="120px"
          >
            <div style="padding: 0 24px">
              <!-- <template v-if="!form.isTwoStove"> -->
              <el-form-item
                style="margin: 18px 0px; margin-bottom: 18px"
                label="上传新Excel"
              >
                <el-upload
                  :before-remove="() => (fileList = [])"
                  class="upload-demo"
                  :file-list="fileList"
                  :before-upload="beforeUpload"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :on-change="handleChange"
                  accept="  .xlsx"
                  :limit="1"
                  :on-exceed="onExceed"
                  :auto-upload="false"
                >
                  <el-button slot="trigger" size="small" type="primary"
                    >点击上传</el-button
                  >
                  <span style="margin-left: 80px">当前Excel</span>
                  <el-link
                    style="padding: 0; line-height: 1.5; margin-left: 24px"
                    :href="geturl()"
                    type="primary"
                  >
                    {{ form.fileName }}
                  </el-link>
                </el-upload>
              </el-form-item>
            </div>
          </el-form>
        </div>
        <span slot="footer">
          <el-button v-loading="loading" type="primary" @click="confirm()"
            >确 定</el-button
          >
          <el-button type="" @click="resetForm('form2')">取 消</el-button>
        </span>
      </el-dialog>
      <!-- 详情 -->
      <el-dialog
        title="详情"
        custom-class="dialogStove"
        @close="dialogClose()"
        append-to-body
        :modal-append-to-body="true"
        width="1200px"
        :visible.sync="dialogDetial"
      >
        <div class="formgar">
          <el-table
            :header-cell-style="getRowClass"
            :data="detailData"
            style="width: 100%"
          >
            <!-- <el-table-column
              header-align="center"
              align="center"
              prop="prop"
              type="index"
              label="编号"
            >
            </el-table-column> -->
            <el-table-column
              label="20-12"
              width="80"
              align="center"
            >
            <template slot-scope="{row}">{{row.level20To12||''}}</template>
            </el-table-column>
            <el-table-column prop="level12To8" label="12-8" width="80" align="center">
            <template slot-scope="{row}">{{row.level12To8 === 0 ? '' : row.level12To8 }}</template>
            </el-table-column>
            <el-table-column
              prop="level8To6"
              label="8-6"
              width="80"
              align="center"
            >
            <template slot-scope="{row}">{{row.level8To6 === 0 ? '' : row.level8To6 }}</template>

            </el-table-column>
            <el-table-column
              prop="level6To4"
              label="6-4"
              width="80"
              align="center"
            >
            <template slot-scope="{row}">{{row.level6To4 === 0 ? '' : row.level6To4 }}</template>

            </el-table-column>
            <el-table-column prop="level4To2" label="4-2" width="80" align="center">
            <template slot-scope="{row}">{{row.level4To2 === 0 ? '' : row.level4To2 }}</template>

            </el-table-column>
            <el-table-column
              prop="level2To1"
              label="2-1"
              width="80"
              align="center"
            >
            <template slot-scope="{row}">{{row.level2To1 === 0 ? '' : row.level2To1 }}</template>

            </el-table-column>
            <el-table-column
              prop="level1ToM5"
              label="1-0.5"
              width="80"
              align="center"
            >
            <template slot-scope="{row}">{{row.level1ToM5 === 0 ? '' : row.level1ToM5 }}</template>
            </el-table-column>
            <el-table-column prop="levelM5ToM15" label="0.5-0.15" width="80" align="center">
            <template slot-scope="{row}">{{row.levelM5ToM15 === 0 ? '' : row.levelM5ToM15 }}</template>

            </el-table-column>
            <el-table-column
              prop="levelM15ToM075"
              label="0.15-0.75"
              width="80"
              align="center"
            >
            <template slot-scope="{row}">{{row.levelM15ToM075 === 0 ? '' : row.levelM15ToM075 }}</template>

            </el-table-column>
            <el-table-column
              prop="levelNm075"
              label="-0.75"
              width="80"
              align="center"
            >
            <template slot-scope="{row}">{{row.levelNm075 === 0 ? '' : row.levelNm075 }}</template>

            </el-table-column>
            <el-table-column
              prop="loss"
              label="损失"
              width="80"
              align="center"
            >
            <template slot-scope="{row}">{{row.loss === 0 ? '' : row.loss }}</template>

            </el-table-column>
            <el-table-column
              prop="sampleScreenTime"
              label="筛样时间"
              width="80"
              align="center"
            >
            <template slot-scope="{row}">{{row.sampleScreenTime === 0 ? '' : row.sampleScreenTime }}</template>

            </el-table-column>
            <el-table-column
              prop="sampleName"
              label="试样名称"
              width="80"
              align="center"
            >
            <template slot-scope="{row}">{{row.sampleName === 0 ? '' : row.sampleName }}</template>

            </el-table-column>
            <el-table-column prop="desc" label="备注" width="" align="center">
            <template slot-scope="{row}">{{row.desc === 0 ? '' : row.desc }}</template>

            </el-table-column>
            <!-- <el-table-column prop="caozuo" label="操作" align="center" width="">
              <template slot-scope="{ row }">
                <div class="tablebBtn">
                  <el-button
                    class="detailBtn"
                   
                    type="text"
                    icon="el-icon-tickets"
                    >详情</el-button
                  >
                  <el-button
                    @click="showEdit(row)"
                    class="operateBtn"
                    type="text"
                    icon="el-icon-edit-outline"
                    >编辑</el-button
                  >
                  <el-button
                    @click="deleteOne(row)"
                    class="operateBtn"
                    type="text"
                    icon="el-icon-delete"
                    >删除</el-button
                  >
                </div>
              </template>
            </el-table-column> -->
          </el-table>
        </div>
        <span slot="footer">
          <el-button
            v-loading="loading"
            @click="dialogDetial = false"
            type="primary"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <div>
        <el-button
          style="margin-bottom: 24px"
          type="primary"
          icon="el-icon-document-add"
          @click="dialogUpload = true"
          >新 增</el-button
        >
        <el-button
          style="float: right; margin-bottom: 24px; margin-right: 12px"
          type="primary"
          ><a
            style="color: #fff"
            href="http://101.42.233.226:9000/graphitelaboratoryanalysis/化验分析报告3.xlsx"
            >模板下载</a
          ></el-button
        >
      </div>
      <el-table
        :header-cell-style="getRowClass"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          header-align="center"
          align="center"
          prop="prop"
          type="index"
          label="编号"
        >
        </el-table-column>
        <el-table-column
          prop="id"
          label="ID"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="200"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="updateTime"
          label="更新时间"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="typeName"
          label="类型"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="specification"
          label="规格"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="shift"
          label="班次"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="chargePerson"
          label="负责人"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="analyzePerson"
          label="分析员"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="date"
          label="日期"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column width="200" align="center"> </el-table-column>
        <el-table-column prop="caozuo" label="操作" align="center" width="">
          <template slot-scope="{ row }">
            <div class="tablebBtn">
              <el-button
                class="detailBtn"
                @click="showDetial(row)"
                type="text"
                icon="el-icon-tickets"
                >详情</el-button
              >
              <el-button
                @click="showEdit(row)"
                class="operateBtn"
                type="text"
                icon="el-icon-edit-outline"
                >编辑</el-button
              >
              <el-button
                @click="deleteOne(row._id)"
                class="operateBtn"
                type="text"
                icon="el-icon-delete"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div
        v-if="tableData.length !== 0"
        class="block"
        style="display: flex; flex-direction: row-reverse; margin-top: 10px"
      >
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :currPage-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
// import * as XLSX from 'xlsx/xlsx.mjs'
import {
  graphiteScreenRecordgetAll,
graphiteScreenRecordcreate,
graphiteScreenRecordupdate,
graphiteScreenRecorddelete
} from "@/api/inspection/screening.js";
import { nomalPages } from "@/mixin";
// import cardUploading from '@/components/uploading.vue'

export default {
  name: "",
  components: {
    // cardUploading
  },
  mixins: [nomalPages],
  data() {
    return {
      loading: false,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      id:"",
      form: {

      },
      fileList: [],
      dialogUpload: false,
      dialogDetial: false,
      dialogUploadThen: false,
      uploading: false,
      succeed: false,
      uploadText: "正在上传..",
      tableData: [
        // {
        //   createTime: "2020",
        //   caozuo: "草拟吗",
        // },
        // {
        //   createTime: "2021",
        //   caozuo: "草拟吗",
        // },
        // {
        //   createTime: "2022",
        //   caozuo: "草拟吗",
        // },
        // {
        //   createTime: "2023",
        //   caozuo: "草拟吗",
        // },
      ],
      sampleData: [],
      rules1: {
        startTime: [
          { required: true, message: "请输入开始送电时间", trigger: "blur" },
        ],
        aStoveCode: [
          { required: true, message: "请输入A炉号", trigger: "blur" },
        ],
        bStoveCode: [
          { required: true, message: "请输入B炉号", trigger: "blur" },
        ],
        stoveCode: [
          { required: true, message: "请输入单炉炉号", trigger: "blur" },
        ],
      },
      rules2: {
        stopTime: [
          { required: true, message: "请输入开始送电时间", trigger: "blur" },
        ],
        startTime: [
          { required: true, message: "请输入开始送电时间", trigger: "blur" },
        ],
        aStoveCode: [
          { required: true, message: "请输入A炉号", trigger: "blur" },
        ],
        bStoveCode: [
          { required: true, message: "请输入B炉号", trigger: "blur" },
        ],
        stoveCode: [
          { required: true, message: "请输入单炉炉号", trigger: "blur" },
        ],
        "stopElectric.aStageTime.startTime2": [
          { required: true, message: "请输入开始送电时间", trigger: "blur" },
        ],
        "stopElectric.aStageTime.startTime1": [
          { required: true, message: "请输入开始送电时间", trigger: "blur" },
        ],
        "stopElectric.aStageTime.stopTime1": [
          { required: true, message: "请输入开始送电时间", trigger: "blur" },
        ],
        "stopElectric.aStageTime.stopTime2": [
          { required: true, message: "请输入开始送电时间", trigger: "blur" },
        ],
        "stopElectric.bStageTime.startTime2": [
          { required: true, message: "请输入开始送电时间", trigger: "blur" },
        ],
        "stopElectric.bStageTime.startTime1": [
          { required: true, message: "请输入开始送电时间", trigger: "blur" },
        ],
        "stopElectric.bStageTime.stopTime1": [
          { required: true, message: "请输入开始送电时间", trigger: "blur" },
        ],
        "stopElectric.bStageTime.stopTime2": [
          { required: true, message: "请输入开始送电时间", trigger: "blur" },
        ],
      },
      detailData: []
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getAllData();
  },
  methods: {
    geturl(){
        const url = `http://101.42.233.226:9000${this.form.url} `
        // console.log(url);
        return url
    },
    showEdit(row) {
      this.dialogUploadThen = true;
    //   console.log(row);
      this.id = row._id
      this.form = JSON.parse(JSON.stringify(row));
    //   console.log(this.form);
    },
    showDetial(row) {
      this.dialogDetial = true;
      console.log(this.sampleData);
      this.detailData = row.sample;

      //   this.detailData = JSON.parse(JSON.stringify(row));
    },
    getAllData() {
      const params = {
        pageSize: this.pageSize,
        currPage: this.currentPage,
      };
      graphiteScreenRecordgetAll(params).then((res) => {
        if (res.data.code === 200) {
          console.log(res.data);
          this.tableData = res.data.data.data;
        }
      });
    },
    beforeFileListChange(file, fileList, fileName) {
      console.log(file);
      const fileType = file.name.substring(file.name.lastIndexOf(".") + 1);
      const fileSize = Number(file.size / 1024 / 1024);
      console.log("上传文件大小为 ", fileSize + " MB");
      console.log("上传文件类型为 ", fileType);
      if (fileSize > 2) {
        this[fileName] = fileList.slice(0, 0);
        this.$message("上传文件不能超过2MB");
      } else {
        if (fileType === "xlsx") {
          this[fileName] = fileList.slice(-1);
        } else {
          this.$message.warning("请上传正确Excel文件");
          this[fileName] = fileList.slice(0, 0);
        }
      }
    },
    beforeUpload() {
      // console.log('beforefile', file)
    },
    handleChange(file, fileList) {
      this.beforeFileListChange(file, fileList, "fileList");
    },

    deleteOne(id) {
        console.log(id);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          graphiteScreenRecorddelete(id).then((res) => {
            if (res.data.code === 200) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getAllData();
            } else {
              this.$message({
                type: "warging",
                message: res.data.message,
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    onExceed() {
      this.$message({
        message: "已选择文件，不可上传多个文件",
      });
    },
    submit() {
      var formdata = new FormData();
      const file = this.fileList[0];

      if (file) {
        formdata.append("file", this.fileList[0].raw);
      } else {
        this.$message.warning("请先上传Excel文件再提交");
        return;
      }

      this.loading = true;
      graphiteScreenRecordcreate(formdata)
        .then((res) => {
          if (res.data.code === 200) {
            this.$message.success("上传成功");
            this.getAllData();
            this.dialogUpload = false;
          } else {
            this.$message.warning(res.data.message);
          }
          this.loading = false;
          this.dialogUpload = false;
        })
        .catch((error) => {
          this.loading = false;
          console.log(error);
          this.dialogUpload = false;
        });
    },
    upload() {
      var formdata = new FormData();
      if (this.fileList[0]) {
        formdata.append("file", this.fileList[0].raw);
      }
      console.log(formdata.getAll("file"));
      this.loading = true;
    //    formdata.append("body", this.form);

    //   formdata.append("id", JSON.stringify(this.id));
    console.log(this.id);
      graphiteScreenRecordupdate(formdata, this.id)
        .then((res) => {
          if (res.data.code === 200) {
            this.$message.success("修改成功");
            this.fileList = [];
            this.dialogUploadThen = false;
            this.getAllData();
          } else {
            this.$message.warning(res.data.message);
          }
          this.loading = false;
          this.dialogUploadThen = false;
        })
        .catch((error) => {
          this.loading = false;
          console.log(error);
          this.dialogUploadThen = false;
        });
    },
    confirm(id) {
      this.$refs.form2.validate((valid) => {
        if (valid) {
          if (this.form.isOk) {
            this.$confirm(
              "提交完成后,将汇总数据,不再支持更改, 是否继续?",
              "提示",
              {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
              }
            )
              .then(() => {
                this.upload();
              })
              .catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消更改",
                });
              });
          } else {
            this.upload();
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    dialogClose() {
      this.form = this.$options.data().form;
      this.fileList = [];
      if (this.$refs.form1) {
        this.$refs.form1.resetFields();
      }
      if (this.$refs.form2) {
        this.$refs.form2.resetFields();
      }
    },
    resetForm(formName) {
      this.dialogUpload = false;
      this.dialogUploadThen = false;
      this.form = this.$options.data().form;
      this.fileList = [];
      this.$refs[formName].resetFields();
    },
    judge(val){
      return  val === 0 ? '' : val
    }
  },
};
</script>

<style  scoped>
.card-search {
  padding-bottom: 10px;
}
.tablebBtn .el-button {
  padding: 6px 10px;
}
.el-divider {
  margin: 30px 0;
}
.el-link {
  line-height: 1;
  padding-bottom: 12px;
}
.dialogTitle {
  padding: 18px;
  font-size: 18px;
}
.detailBtn {
  color: $warning;
  padding: 8px;
  font-size: 12px !important;
  margin: 0 !important;
  &:hover {
    color: rgb(223, 197, 112);
  }
}
.operateBtn {
  color: $primary;
  padding: 8px;
  font-size: 12px !important;
  margin: 0 !important;
  &:hover {
    color: rgb(141, 142, 197);
  }
}
.isTow {
   .el-radio-button:first-child .el-radio-button__inner {
    border-radius: 2px 0 0 2px;
  }
   .el-radio-button:last-child .el-radio-button__inner {
    border-radius: 0 2px 2px 0;
  }
   .is-active .el-radio-button__inner {
    background-color: $primary;
    border-color: $primary;
  }
}
.table_Excel {
  width: 100%;
  border-collapse: collapse;
  th,
  td {
    border: 1px solid #999;
    text-align: center;
    padding: 10px 0;
    width: 120px;
  }
  tr:hover {
    background-color: #ccc;
  }
}
</style>
<style >